<!--人员管理-->
<template>
  <div class="person-manage">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-renyuan" />
        </div>
        <span>人员管理</span>
      </div>
      <div slot="extra">
        <a-button type="primary" icon="plus" class="icon-button" @click="personClick('add')">人员新增</a-button>
      </div>
      <div class="card-table">
        <div class="person-left" :style="{width: (isShowLeftTree ? '0': '18%')}">
          <div class="person-left-tree" v-if="!isShowLeftTree">
            <!-- 组织结构树 -->
            <a-tree
              blockNode
              show-line
              :treeData="treeData"
              defaultExpandAll
              v-if="treeData.length > 0">
            </a-tree>
            <a-empty v-else />
          </div>
          <div class="handle" @click="treeToggle">
            <img src="@/assets/images/leftTree-show.png" alt="" v-if="!isShowLeftTree">
            <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
          </div>
        </div>
        <div class="person-right" :style="{width: (isShowLeftTree ? 'calc(100% - 1px)': '82%')}">
          <!-- 人员管理表格 -->
          <el-table
            :data="personTableData"
            highlight-current-row
            border
            height="100%"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
            style="width: 100%">
            <slot v-for="(item,index) in personColumns">
              <el-table-column
                :key="index"
                :property="item.field"
                :label="item.title"
                :width="item.width"
                show-overflow-tooltip
                sortable>
              </el-table-column>
            </slot>
            <el-table-column label="操作">
              <template>
                <a @click="personClick('edit')">编辑</a>
                <a-divider type="vertical" />
                <a @click="personClick('del')">删除</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </a-card>

    <!-- 人员管理弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle"
      v-model="dialogFormVisible"
      width="60%">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="员工名称">
              <a-input v-decorator="[ 'BI_BaseName', {rules: [{ required: true, message: '请输入员工名称' }]} ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="员工代号">
              <a-input v-decorator="[ 'BI_Code' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="身份证">
              <a-input v-decorator="[ 'BI_CardID' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="性别">
              <a-select v-decorator="['BI_Sex' ]" >
                <a-select-option value="男">男</a-select-option>
                <a-select-option value="女">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="考勤编号">
              <a-input v-decorator="['BI_AttendanceID' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电子邮件">
              <a-input v-decorator="[ 'BI_Email' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="办公电话">
              <a-input v-decorator="['BI_OfficeTel' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="移动电话">
              <a-input v-decorator="[ 'BI_Mobile' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="办公传真">
              <a-input v-decorator="['BI_OfficeFax' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="入职时间">
              <a-date-picker v-decorator="[ 'BI_EntryDay' ]" style="width: 100%;" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="工作时间">
              <a-date-picker v-decorator="[ 'BI_WorkDay' ]" style="width: 100%;" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="出生日期">
              <a-date-picker v-decorator="[ 'BI_BirthDay' ]" style="width: 100%;" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="民族">
              <a-input v-decorator="['BI_Nation' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="籍贯">
              <a-input v-decorator="['BI_NaPlace' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="家庭电话">
              <a-input v-decorator="['BI_HomeTel1' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="婚姻状态">
              <a-select v-decorator="['BI_MarStatus' ]">
                <a-select-option value="单身">单身</a-select-option>
                <a-select-option value="已婚">已婚</a-select-option>
                <a-select-option value="离异">离异</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="详细地址">
              <a-input v-decorator="['BI_Address' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="相关备注">
              <a-input v-decorator="['BI_PersRemark' ]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'PersonManage',
  components: {
  },
  data () {
    return {
      isShowLeftTree: false, // 左侧显示与隐藏
      treeData: [ // 组织结构树数据
        {
          title: '研发中心',
          key: '1',
          children: [
            { title: '技术部', key: '1-1' },
            { title: '市场部', key: '1-2' },
            { title: '研发部', key: '1-3' }
          ]
        }
      ],
      modalTitle: '', // 人员管理弹框标题
      dialogFormVisible: false, // 人员管理弹框显示与隐藏
      form: this.$form.createForm(this),
      personTableData: [ // 人员管理表格数据
        {
          BI_BaseName: '笑死',
          BI_Code: 'admin',
          BI_CardID: 'ksdfsdjfjskd',
          BI_Sex: '男',
          BI_AttendanceID: '11',
          BI_OfficeTel: '3233243',
          BI_Mobile: '32244235345',
          BI_Email: '12931237146317@qq.com',
          BI_EntryDay: '2019-12-20'
        }
      ],
      personColumns: [ // 人员管理表头数据
        {
          title: '员工名称',
          field: 'BI_BaseName'
        },
        {
          title: '员工代号',
          field: 'BI_Code'
        },
        {
          title: '身份证',
          field: 'BI_CardID'
        },
        {
          title: '员工性别',
          field: 'BI_Sex'
        },
        {
          title: '考勤编号',
          field: 'BI_AttendanceID'
        },
        {
          title: '办公电话',
          field: 'BI_OfficeTel'
        },
        {
          title: '移动电话',
          field: 'BI_Mobile'
        },
        {
          title: '电子邮件',
          field: 'BI_Email'
        },
        {
          title: '入职时间',
          field: 'BI_EntryDay'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 左侧显示与隐藏事件
    treeToggle () {
      this.isShowLeftTree = !this.isShowLeftTree
    },
    // 人员管理按钮事件 val代表类型，add：人员新增，edit：人员编辑，del：人员删除
    personClick (val) {
      switch (val) {
        case 'add':
          this.modalTitle = '人员新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '人员编辑'
          this.dialogFormVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.person-manage {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .card-table {
    height: 100%;
    .person-left {
      float: left;
      width: 18%;
      height: 100%;
      border: 1px solid #EBEEF5;
      border-right: none;
      position: relative;
      transition: all 0.2s;
      .person-left-tree {
        height: 100%;
        overflow: auto;
      }
      .handle {
        position: absolute;
        right: -18px;
        top: 50%;
        margin-top: -32px;
        z-index: 100;
        cursor: pointer;
      }
    }
    .person-right {
      float: left;
      width: 82%;
      height: 100%;
      transition: all 0.2s;
    }
  }
}
</style>
